<template>
  <li v-for="item of props.data" :key="item.id">
    <p>{{ item.username }} 说:</p>
    <p>{{ item.comment }}</p>
    <p>
      👍
      <a href="javascript:;" @click="showReplyForm(item)">回复</a>
    </p>
    <div v-if="item.isReply">
      <p><textarea v-model="item.replyText"></textarea></p>
      <p><button @click="addReply(item)">提交回复</button></p>
    </div>
    <div v-if="item.children">
      <ul>
        <CommentComp :data="item.children" @add-reply="addReply" />
      </ul>
    </div>
  </li>
</template>

<script setup>
const props = defineProps({ data: Array, userInfo: Object });
const emits = defineEmits(['addReply']);
const showReplyForm = (item) => {
  item.isReply = !item.isReply;
};
const addReply = (item) => {
  // console.log(item);
  //{id: '1677656722137', uid: '3', pid: '0', username: 'Jerry', comment: '333',isReply:true}
  const replyText = item.replyText;
  emits('addReply', item, replyText, props.userInfo);
  item.isReply = false;
};
</script>

